<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
request.setAttribute("basePath", basePath);
%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="${basePath}/css/default/om-default.css" />
<link rel="stylesheet" href="${basePath}/css/base.css" />
<link rel="stylesheet" href="${basePath}/css/meroperation.css" />
<link rel="stylesheet" href="${basePath}/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" type="text/css" href="${basePath}/css/grid-extra.css" />
<script type="text/javascript" src="${basePath}/js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${basePath}/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="${basePath}/js/operamasks-ui.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${basePath}/js/om-grid.js" charset="utf-8"></script>
<script type="text/javascript" src="${basePath}/js/om-calendar.js" charset="utf-8"></script>
<script type="text/javascript" src="${basePath}/js/util.js"></script>
<script type="text/javascript" src="${basePath}/js/tools.js" charset="utf-8"></script>
<title>Insert title here</title>
<script type="text/javascript">

var setting = {
		async: {  
            enable: true,  
            url:"${basePath}/privilege/resource/queryResourceNode.do",  
            type: "get"  
        }, 
		view: {
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			
			selectedMulti: false
		},
		edit: {
			enable: true,
			showRemoveBtn: true,
			showRenameBtn: true
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "parentId",
			}
		},
		callback: {
			beforeEditName: beforeEdit,
			beforeRemove: beforeRemove,
			//onRename: onRename,
			onClick: onClick
		}
	};

	var log, className = "dark";
	var doTreeNode;
	function setResource(treeNode)
	{
		$('#name').val(treeNode.name);
		$('#type').val(treeNode.type);
		$('#url').val(treeNode.url);
		$('#permission').val(treeNode.permission);
		$('#id').val(treeNode.id);
		$('#available').val(treeNode.available);
		
		var node = treeNode.getParentNode();
		$('#pName').val(node.name);
		$('#pId').val(node.id);
		$('#pparentId').val(node.parentId);
		$('#pparentIds').val(node.parentIds);
		
		
	}
	
	function emptyField()
	{
		$('input').each(function(index){
			$(this).val('');
		});
		$('select').each(function(index){
			$(this).val('');
		});
	}
	
	function onClick(event, treeId, treeNode)
	{
		setResource(treeNode);
		$('#resourceBtn').attr('disabled',true).removeClass('iconrept');
	}
	
	function beforeEdit(treeId, treeNode)
	{
		doTreeNode = treeNode;
		emptyField();
		setResource(treeNode);
		$('#resourceBtn').attr('disabled',false).addClass('iconrept');
		return false;
	}
	
	function beforeRemove(treeId, treeNode) {
		par = new Object();
		par.id = treeNode.id;
		$.ajax({
			type: "POST",
			async:false, 
            url: "${basePath}/privilege/resource/deleteResource.do",
            data: par,
            dataType: "json",
            success: function(data){
            	return data.success;
            }
		});
	}
	function onRename(e, treeId, treeNode, isCancel) {
		setResource(treeNode);
	}
	function getTime() {
		var now= new Date(),
		h=now.getHours(),
		m=now.getMinutes(),
		s=now.getSeconds(),
		ms=now.getMilliseconds();
		return (h+":"+m+":"+s+ " " +ms);
	}

	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
			+ "' title='add node' onfocus='this.blur();'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_"+treeNode.tId);
		if (btn) btn.bind("click", function(){
			var zTree = $.fn.zTree.getZTreeObj("tree");
			doTreeNode = treeNode;
			//zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
		emptyField();
		$('#pName').val(treeNode.name);
		$('#pId').val(treeNode.id);
		$('#pparentId').val(treeNode.parentId);
		$('#pparentIds').val(treeNode.parentIds);
		$('#resourceBtn').attr('disabled',false).addClass('iconrept');
			return false;
		});
	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.tId).unbind().remove();
	};

	
	$(document).ready(function(){
		//$.fn.zTree.init($("#tree"), setting, zNodes);
		$.fn.zTree.init($("#tree"), setting);  
            setTimeout(function(){  
                 
            },1000);
	});
	
	function resourceSave()
	{
		var isNew = false;
		var par = new Object();
		par.id = $('#id').val();
		par.name = $('#name').val();
		par.type = $('#type').val();
		par.url = $('#url').val();
		par.permission = $('#permission').val();
		par.available = $('#available').val();
		if(!par.id )
		{
			par.parentId = $('#pId').val();
			pparentIds = $('#pparentIds').val();
			par.parentIds = pparentIds+par.parentId+"/";
			isNew = true;
		}
		
		$.ajax({
			type: "POST",
            url: "${basePath}/privilege/resource/saveOrUpdateResource.do",
            data: par,
            dataType: "json",
            success: function(data){
            	if(data.success)
            	{
            		alert("保存成功");	
            		node = data.rows[0];
            		var zTree = $.fn.zTree.getZTreeObj("tree");
            		if(!isNew)
            		{
            			doTreeNode.name =node.name;
            			doTreeNode.type = node.type;
            			doTreeNode.url =node.url;
            			doTreeNode.permission =node.permission;
            			doTreeNode.available = node.available;
            			zTree.editName(node);
            		}else{
            			zTree.addNodes(doTreeNode, node);
            		}
            		
            	}else{
            		alert(data.message);
            	}
            	var zTree = $.fn.zTree.getZTreeObj("tree");
            	zTree.refresh();
            }
		})
		
	}
	
</script>
	<style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	.ui-search-item tr{height: 60px}
	</style>
</head>
<body>
		<div class='ui-nav fn-clear pl15'>
		    <div class='fn-left ft-14 pt5'><strong>权限管理    > 资源管理</strong></div>
		</div>
		
 		<table border=0 height=600px align=left>
			<tr>
				<td width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
					<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
				</td>
				<td width=770px align=left valign=top>
					<form id='selectForm' method="post" style="margin-top: 30px;margin-left: 30px">
				        <table class='ui-search-item' >
				        	<tr >
				            	<td>
				            		<label>所属资源：</label>
				            		<input type ="text" name="pName" id="pName"/> 
				            		<input type ="hidden" name="pId"  id="pId"/>
				            		<input type ="hidden" name="pparentId"  id="pparentId"/>
				            		<input type ="hidden" name="pparentIds"  id="pparentIds"/>
				            	</td>
				            </tr>
				            <tr >
				            	<td>
				            		<label>资源名称：</label>
				            		<input type ="text" name="name" id="name"/> 
				            		<input type ="hidden" name="id"  id="id"/>
				            	</td>
				            </tr>
				            <tr>	
				            	<td>
				            		<label>资源路径：</label>
				            		<input type ="text" name="url" id="url"/> 
				            	</td>
							</tr>
				            <tr>	
				            	<td>
				            		<label>资源类型：</label>
				            		<select id="type"  name ="type" style="width: 100px">
				            			<option value="">选择</option>
				            			<option value="0">url资源</option>
				            			<option value="1">菜单</option>
				            			<option value="2">按钮</option>
				            		</select> 
				            	</td>
							</tr>
							<tr>	
				            	<td>
				            		<label>权限：</label>
				            		<input type="text" id="permission" name="permission"/> 
				            	</td>
							</tr>	
							<tr>	
				            	<td>
				            		<label>资源类型：</label>
				            		<select id="available"  name ="available" style="width: 100px">
				            			<option value="">选择</option>
				            			<option value="1">启用</option>
				            			<option value="0">禁用</option>
				            		</select> 
				            	</td>
							</tr>
							<tr>	
				            	<td>
					            		<button type='button' class='btn ml3' onclick="resourceSave()" id="resourceBtn" disabled="true" style="margin-left: 80px">
				                            <span></span>保存
				                        </button>
				            	</td>
							</tr>									
						</table>
					</form>		
				</td>
			</tr>
			
		</table>
</body>
</html>